<template>
  <div class="session-wrapper">
    <own-search>
      <div class="search-wrapper">
        <a-tooltip title="列表视图">
          <bars-outlined style="font-size: 20px" />
        </a-tooltip>
        <a-divider type="vertical" />
        <a-tooltip title="卡片视图">
          <appstore-outlined style="font-size: 20px" />
        </a-tooltip>
        <a-button
          type="primary"
          v-acl="['resource:photo:upload']"
          @click="upload"
        >
          <template #icon>
            <upload-outlined />
          </template>
          上传图片</a-button
        >
        <a-button type="default" v-acl="['resource:photo:del']" @click="del">
          <template #icon> <delete-outlined /> </template>删除图片</a-button
        >
        <a-button
          type="default"
          v-acl="['resource:photo:folder']"
          @click="folderManage"
        >
          <template #icon><folder-outlined /></template>管理文件夹</a-button
        >
        <a-button type="default" @click="reset">刷新</a-button>
      </div>
    </own-search>
    <div class="d-flex align-items-center folder-wrapper">
      <span class="folder folder-title font-weight-bold">文件夹</span>
      <div class="folder-container flex-1">
        <span
          class="folder"
          v-for="(folder, index) in folders"
          :key="index"
          :class="{ active: activeFolder.id == folder.id }"
          @click="selectFolder(folder)"
        >
          {{ folder.folderName }}({{ folder.count }})</span
        >
      </div>
    </div>
    <div class="table-wrapper">
      <a-table
        :row-key="(record) => record.id"
        :loading="loading"
        :columns="columns"
        :pagination="pagination"
        :data-source="sourceData"
        @change="handleTableChange"
      >
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.key === 'index'">{{
            (page.pi - 1) * page.ps + index + 1
          }}</template>
          <template v-if="column.key === 'operate'">
            <a>预览</a>
            <a-divider type="vertical" />
            <a-popconfirm
              title="是否删除当前该行数据？"
              ok-text="确定"
              cancel-text="取消"
              @confirm="del(record)"
            >
              <a href="#">删除</a>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
    </div>

    <own-folder ref="ownFolderModal" @submit="getFolder" />
    <own-multi-photo-upload
      :folders="folders"
      ref="ownMultiPhotoUploadModal"
      @submit="getFolder"
    />
  </div>
</template>

<script lang="ts">
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  ref,
  toRefs,
} from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  BarsOutlined,
  AppstoreOutlined,
  UploadOutlined,
  DeleteOutlined,
  FolderAddOutlined,
  FolderOutlined,
} from "@ant-design/icons-vue";
import resourceApis from "@/apis/resource";
import { useStore } from "@/store";
import OwnSearch from "@/components/own-search.vue";
import OwnFolder from "@/components/own-folder.vue";
import OwnMultiPhotoUpload from "@/components/own-multi-photo-upload.vue";
import { PaginationConfig } from "@/utils/antd-config";
const columns = [
  {
    title: "",
    key: "index",
    align: "center",
    width: 60,
  },
  {
    title: "图片路径",
    // dataIndex: "roleName",
    dataIndex: "url",
    width: 400,
    ellipsis: true
  },
  {
    title: "图片全路径",
    // dataIndex: "roleName",
    dataIndex: "fullUrl",
     ellipsis: true
  },
  {
    align: "center",
    title: "操作",
    key: "operate",
    width: 120,
  },
];
export default defineComponent({
  name: "Photo",
  components: {
    BarsOutlined,
    AppstoreOutlined,
    UploadOutlined,
    DeleteOutlined,
    FolderAddOutlined,
    FolderOutlined,
    OwnMultiPhotoUpload,
    OwnSearch,
    OwnFolder,
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const store = useStore();
    const ownFolderModal = ref(null);
    const ownMultiPhotoUploadModal = ref(null);
    const state = reactive({
      type: 1,
      folders: [] as Array<any>,
      activeFolder: { id: "" } as any,
      loading: false as boolean,
      sourceData: [] as Array<any>,
      page: {
        pi: 1,
        ps: 10,
        total: 0,
      },
    });
    // 查询
    const reload = async () => {
      state.loading = true;
      const res: any = await resourceApis.photoPage({
        ...state.page,
        companyId: store.state.user.company.id,
        folderId: state.activeFolder.id,
      });
      state.loading = false;
      if (res.code === 0) {
        state.sourceData = res.data.records;
        state.page.total = res.data.total;
      }
    };
    const reset = () => {
      state.page.pi = 1;
      reload();
    };
    const del = () => {};
    const pagination = computed(() => ({
      total: state.page.total,
      current: state.page.pi,
      pageSize: state.page.ps,
      ...PaginationConfig,
    }));
    // table切换页码页数
    const handleTableChange = (
      pagination: { pageSize: number; current: number }
      // filters: any,
      // sorter: any
    ) => {
      state.page.pi = pagination.current;
      state.page.ps = pagination.pageSize;
      reload();
    };
    const upload = () => {
      (ownMultiPhotoUploadModal as any).value.open(state.activeFolder.id);
    };
    const folderManage = () => {
      (ownFolderModal as any).value.open(state.type);
    };
    const getFolder = async () => {
      const res: any = await resourceApis.selectFolder({
        companyId: store.state.user.company.id,
        type: state.type,
      });
      if (res.code === 0) {
        state.folders = res.data;
        if (!state.activeFolder.id) {
          state.activeFolder = res.data[0];
        }
        reset();
      }
    };
    const selectFolder = (folder) => {
      state.activeFolder = folder;
      reset();
    };
    onMounted(async () => {
      getFolder();
    });
    return {
      upload,
      del,
      reload,
      columns,
      pagination,
      reset,
      folderManage,
      handleTableChange,
      selectFolder,
      getFolder,
      ownFolderModal,
      ownMultiPhotoUploadModal,
      ...toRefs(state),
    };
  },
});
</script>



<style scoped lang="less">
.folder-wrapper {
  margin-top: -10px;
}
.folder-title {
  margin: 5px 0;
  padding: 5px 20px 5px 0;
  font-weight: bold;
}

.folder-container {
  margin-right: 10px;
  padding: 5px 0;
  overflow-x: auto;
  white-space: nowrap;

  .folder {
    display: inline-block;
    margin: 5px 10px;
    padding: 5px 20px;
    border: 1px solid transparent;
    cursor: pointer;
  }

  .active {
    color: #2288fe;
    font-weight: bold;
    border: 1px solid #2288fe;
    border-radius: 20px;
  }
}
</style>
